/* CSS Document */
/* created by chow-2011 */

/* search box */

.search-box {
    margin: 0 0 5px 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #DAE4EC;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;    
}

.search-box h3 {
    margin: 0;
    padding: 0 5px;
    font-size: 12px;
    font-family: arial;
    color: #454545;
    background-image: url('../img/search-box-bg.png');
    background-position: center left;
    background-repeat: repeat-y;
    background-color: #58A100;
    border-bottom: 1px solid #97CA00;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.search-box h3 a{
    display: block;
    margin: 0;
    padding: 7px 10px 7px 25px;
    text-decoration: none;
    color: #fff;
    vertical-align: middle;
    background-image: url('../img/search-box-h3.png');
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 20px;
}

.search-box h3 a:hover{
    text-decoration: none;
}

/* Notification ==========================================================*/

.notification {
    margin: 0 0 2px 0;
    padding: 3px 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 12px;
}

.notification strong {
    margin: 0;
    padding: 0;
    color: #ffee61;
}

.notification p {
    margin: 2px 0;
    padding: 0;
    color: #fff;
    font-size: 12px;
}

.notification ul {
    float: none;
    margin: 0;
    padding: 0;
}

.notification li {
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    font-size: 12px;
}

.notification.red {
    background-color: #f1878a;
    border: 1px solid #dd686b;
}

.notification.green {
    background-color: #96b776;
    border: 1px solid #719c48;
}

/* Pagination */

.pageRow {
    float: left;
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 11px;
    width: 30%;
    clear: both;
}

.pageNav {
    float: left;
    margin: 0;
    padding: 0;
}

.pageNav ul {
    float: right;
    margin: 0;
    padding: 0;
}

.pageNav li {
    float: left;
    margin: 0;
    padding: 0;
    color: #333;
    list-style: none;
}

.pageNav li.info {
    padding: 3px 3px 0 3px;
}

.pageNav a {
    margin: 0 2px 0 0;
    padding: 3px 8px;
    color: #fff;
    height: 17px;
    font-size: 11px;
    text-align: center;
    display: block;
    border-bottom: 1px solid #333;
    background-color: #202020;
    background-image: url("../img/pagination-bg.png");
    background-repeat: repeat-x;
    text-decoration: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.pageNav a:hover {
    background-image: url("../img/pagination-bg-hover.png");
    background-repeat: repeat-x;
    background-color: #4F4F4F;
    text-decoration: none;

}

.pageNav a.active {
    padding: 2px 8px 3px 8px;
    color: #000;
    background-image: url("../img/pagination-bg-active.png");
    background-color: #E3E3E3;
    border: 1px solid #ccc;
}

.pageNav p {
    margin: 0;
    padding: 0;
    color: #686869;
}

.pageNav p strong {
    color: #536aa5;
}

/* breadcrum */

.breadcrum {
    margin: 0 0 5px 0;
    padding: 0;
    height: 24px;
    background-color: #ECE9D8;
    border: 1px solid #DAD5BA;
}

.breadcrum p {
    margin: 0;
    padding: 0;
}

.breadcrum span{
    float: left;
    margin: 0;
    padding: 0;
    height: 24px;
    width: 9px;
    background-image: url("../img/breadcrum-icon.png");
    background-position: left center;
    background-repeat: no-repeat;
}

.breadcrum a {
    float: left;
    margin: 0;
    padding: 4px 6px;
    height: 20px;
    color: #666;
    text-decoration: none;
}

.breadcrum a:hover{
    color: #000000;
    text-decoration: none;

}

.breadcrum small{
    float: left;
    margin: 0;
    padding: 4px 6px;
    height: 20px;
    color: #333;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
}

/*
calendar full pages
*/

.calendar-widget {
    margin: 0 0 5px 0;
    padding: 2px;
    background-color: #FFF;
    border: 1px solid #DDD;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.calendar-widget h3 {
    margin: 0;
    padding: 8px 10px;
    color: #424242;
    background-image: url("../img/calendar-h3-bg.png");
    background-position: left top;
    background-repeat: repeat-x;
    background-color: #EFEFEF;
    font-size: 16px;
    text-align: center;
}

.calendar-widget h3 a {
    margin: 0 15px;
    padding: 0;
    vertical-align: middle;
    border: none;
    text-decoration: none;
}

.calendar-widget h3 a:hover {
    text-decoration: none;
}

.calendar-widget h3 a img {
    vertical-align: bottom;
    height: 24px;
}

/*
dashboard
*/

.dashboard-widget {
    margin: 0 0 5px 0;
    padding: 0;
}

.dashboard-navigation {
    margin: 0 0 5px 0;
    padding: 0;
}

.dashboard-navigation a {
    float: left;
    text-decoration: none;
}

.dashboard-navigation a.button {
    display: block;
    margin: 0 5px 0 0;
    padding: 10px 20px;
    color: #666;
    background-color: #FFD86F;
    border: 1px solid #FFD86F;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    height: 45px;
}

.dashboard-navigation a.button:hover {
    text-decoration: none;
    background-color: #FFFBCC;
    color: #000;
}

.dashboard-navigation a.button img {
    margin: 0 0 5px 0;
    padding: 0;
    border: none;
    height: 40px;
}

.dashboard-navigation a.info {
    display: block;
    margin: 0 5px 0 0;
    padding: 10px;
    color: #fff;
    background-color: #E63A3A;
    border: 1px solid #E63A3A;
    font-size: 11px;
    text-align: left;
    height: 45px;
    min-width: 180px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.dashboard-navigation a.info:hover {
    text-decoration: none;
}

.dashboard-navigation a.info img {
    float: left;
    margin: 0 5px 0 0;
    padding: 0 0 13px 0;
    border: none;
    height: 32px;
    vertical-align: middle;
}

.dashboard-navigation a.info b {
    font-size: 12px;
}

.dashboard-navigation a.approved {
    display: block;
    margin: 0 5px 0 0;
    padding: 10px;
    color: #fff;
    background-color: #56AF45;
    border: 1px solid #56AF45;
    font-size: 11px;
    text-align: left;
    height: 45px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.dashboard-navigation a.waiting {
    display: block;
    margin: 0 5px 0 0;
    padding: 10px;
    color: #fff;
    background-color: #368EE0;
    border: 1px solid #368EE0;
    font-size: 11px;
    text-align: left;
    height: 45px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/*
step box
*/

.step_box {
    margin: 0 0 5px 0;
    padding: 0;
}

.step_box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.step_box li {
    margin: 0;
    padding: 0;
}

.step_box li a {
    float: left;
    display: block;
    margin: 0;
    padding: 8px;
    height: 17px;
    background-image: url("../img/step-bg-default.png");
    background-position: left top;
    background-repeat: repeat-x;
    color: #494949;
    border: 1px solid #CECECE;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.step_box li a:hover {
    text-decoration: none;
}

.step_box li a.done {
    background-image: url("../img/step-bg.png");
    background-position: left top;
    background-repeat: repeat-x;
    color: #fff;
    border: 1px solid #61BFE3;
}

/*
dashboard link
*/

.dashboard-link {
    margin: 0;
    padding: 6px 10px;
    background-color: #FFFFFF;
}

.dashboard-link p.tanggal {
    float: left;
    margin: 4px 0 0 0;
    padding: 0;
    font-size: 11px;
}

.dashboard-link p.button {
    float: right;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.dashboard-link p.button input.button {
    margin: 0;
    padding: 1px 4px 4px;
    vertical-align: middle;
    background-image: url("../img/dashboard-button.png");
    background-position: left center;
    background-repeat: no-repeat;
    background-color: #3fa4da;
    border: none;
    color: #fff;
    height: 25px;
    width: 72px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-family: tahoma;
    font-size: 12px;
}

.dashboard-link p.button input.button:hover {
    cursor: pointer;
}

.dashboard-link p.button select {
    border: 1px solid #B4BED6;
    border-radius: 2px;
    margin: 0;
    padding: 3px 5px;
    vertical-align: middle;
    color: #000;
    font-family: tahoma;
    font-size: 12px;
}

.dashboard-link p.button span {
    margin: 0;
    padding: 5px 5px 2px;
    vertical-align: middle;
}

/**/

.dashboard-link p.button2 {
    float: left;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.dashboard-link p.button2 input.button2 {
    margin: 0;
    padding: 1px 4px 4px;
    vertical-align: middle;
    background-image: url("../img/dashboard-button.png");
    background-position: left center;
    background-repeat: no-repeat;
    background-color: #3fa4da;
    border: none;
    color: #fff;
    height: 25px;
    width: 72px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-family: tahoma;
    font-size: 12px;
}

.dashboard-link p.button2 input.button2:hover {
    cursor: pointer;
}

.dashboard-link p.button2 select {
    margin: 0;
    padding: 3px 5px;
    vertical-align: middle;
    border: none;
    color: #000;
    font-family: tahoma;
    font-size: 12px;
}

.dashboard-link p.button2 span {
    margin: 0;
    padding: 5px 5px 2px;
    vertical-align: middle;
}

/*
dashboard content
*/

.dashboard-content {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    background-image: url("../img/dashboard-bg.png");
    background-position: right top;
    background-repeat: repeat-y;
}

.dashboard-wrapper {
    margin: 0;
    padding: 0;
    background-color: transparent;
    background-image: url("../img/dashboard-wrapper-bg.png");
    background-position: left top;
    background-repeat: repeat-y;
    border-top: 1px solid #CECECE;
    border-bottom: 1px solid #CCC;
}

.dashboard-content .side-info{ 
    float: left;
    margin: 0;
    padding: 0;
    width: 196px;
    border-left: 1px solid #fff;
}

.dashboard-content .side-info .link-box { 
    margin: 0;
    padding: 5px;
    width: 175px;
    background-color: #E7F0F7;
    font-size: 11px;
    border-bottom: 1px solid #CDDBE4;
}

.dashboard-content .side-info .link-box p { 
    margin: 0 0 5px 0;
    padding: 0;
    line-height: 16px;
    color: #525659;
    width: 127px;
}

.dashboard-content .side-info .link-box a {
    margin: 0;
    padding: 0;
    color: #2469A2;
}

.dashboard-content .side-info .link-box a:hover { 

}

.dashboard-content .side-info .link-box small { 
    float: right;
    color: #314F8B;
    font-size: 20px;
    font-weight: bold;
    vertical-align: top;
}

.dashboard-content .side-info .active { 
    margin: 0;
    padding: 5px;
    width: 175px;
    background-color: #CC3333;
    font-size: 11px;
    border-bottom: 1px solid #CDDBE4;
}

.dashboard-content .side-info .active p { 
    margin: 0 0 5px 0;
    padding: 0;
    line-height: 16px;
    color: #fff;
    width: 127px;
}

.dashboard-content .side-info .active a {
    margin: 0;
    padding: 0;
    color: #FEE482;
}

.dashboard-content .side-info .active a:hover { 

}

.dashboard-content .side-info .active small { 
    float: right;
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    vertical-align: top;
}

.dashboard-content .side-dashboard{ 
    float: right;
    margin: 0;
    padding: 2px 2px 2px 8px;
    width: 248px; /* 258px */
}

.dashboard-content .side-dashboard .chart{ 
    margin: 0 0 5px 0;
    padding: 5px;
    background-color: #F7F7F7;
    border: 1px solid #ECF1EB;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.dashboard-content .side-dashboard .chart h5{ 
    margin: 0;
    padding: 4px;
    font-size: 11px;
    background-color: #E8F1F8;
    color: #495257;
}

.dashboard-content .side-dashboard table{ 
    margin: 0;
    padding: 0; 
    background-color: #fff;
    font-family: tahoma;
    font-size: 10px;
    color: #666;
}

.dashboard-content .side-dashboard table th {
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid #cdcdcd;
    color: #272727;
    font-weight: normal;
}

.dashboard-content .side-dashboard table td {
    margin: 0;
    padding: 4px;
    border-bottom: 1px dotted #cdcdcd;
}

.dashboard-content .side-dashboard table tr.warning {
    background-color: #FFDCD4;
    color: #333;
}

.dashboard-table {
    float: left;
    margin: 0;
    padding: 0; 
    width: 59%;
    background-color: #fff;
}

.dashboard-table h4 {
    margin: 3px 0;
    padding: 10px; 
    background-color: #58585A;
    border-bottom: 2px solid #F7941D;
    color: #fff;
    font-size: 12px;
}

.dashboard-table .normal{
    margin: 0 0 5px 0;
    padding: 0;
    border-collapse: collapse;
    color: #515151;
    font-size: 11px;
    background-color: #fff;
    font-family: tahoma;
}

.dashboard-table .normal th {
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid #cdcdcd;
    color: #272727;
    font-weight: normal;
}

.dashboard-table .normal td {
    margin: 0;
    padding: 4px;
    border-bottom: 1px dotted #cdcdcd;
}

.dashboard-table .normal tr.active {
    font-weight: bold;
    background-color: #FFFAE0;
    border-top: 1px solid #FFD8A5;
    border-bottom: 1px solid #FFD8A5;
}

/*
Dashboard Info
*/

.dashboard-info {
    margin: 0;
    padding: 5px;
    background-color: #f9f9f9;
    font-family: tahoma;
}

.info-box {
    float: left;
    margin: 0;
    padding: 5px;
    width: 32%;
}

.info-box h5 {
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
    color: #363636;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 1px solid #ddd;
}

.info-box p {
    margin: 0 0 5px 0;
    padding: 0;
}

.info-box .user-images {
    float: left;
    margin: 0 5px 0 0;
    padding: 0;
    height: 32px;
}

/**/

.info-box-2 {
    float: left;
    margin: 0;
    padding: 5px;
    width: 48%;
}

.info-box-2 h5 {
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
    color: #363636;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 1px solid #ddd;
}

.info-box-2 p {
    margin: 0 0 5px 0;
    padding: 0;
}

.info-box-2 .user-images {
    float: left;
    margin: 0 5px 0 0;
    padding: 0;
    height: 32px;
}

/**/

.info-box-3 {
    float: left;
    margin: 0;
    padding: 5px;
    width: 100%;
}

.info-box-3 h5 {
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
    color: #363636;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 1px solid #ddd;
}

.info-box-3 p {
    margin: 0 0 5px 0;
    padding: 0;
}

.info-box-3 .user-images {
    float: left;
    margin: 0 5px 0 0;
    padding: 0;
    height: 32px;
}

/* map content */

.map-content {
    margin: 0;
    padding: 0;
}

.map-box {
    float: left;
    margin: 0 5px 5px 0;
    padding: 0;
    display: block;
    border: 1px solid #FFDE76;
    background-color: #FFF6C6;
    width: 24.35%;
    height: auto;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

}

.map-box p{
    margin: 0;
    padding: 0;
    text-align: left;
    line-height: 18px;
}

.map-box a{
    margin: 0;
    padding: 10px;
    display: block;
    color: #C93E09;
    font-size: 14px;
    font-family: tahoma;
    background-color: #FFF6C6;
    width: 92.55%;
    height: auto;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.map-box a:hover{
    text-decoration: none;
    color: #000;
    background-image: url("../img/map-box-a-bg.png");
    background-repeat: repeat-x;
    background-position: center;
    background-color: #fff0b3;
}

.map-box img {
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
    height: 48px;
    border: none;
}

.map-box a small {
    margin: 0;
    padding: 0;
    color: #666;
    font-size: 11px;
}

/*
dashboard-box
*/

.dashboard-box {    
    margin: 0;
    padding: 5px;
    background-color: #FFFFFF;
    border-top: 1px dashed #eee;
    font-family: tahoma;
}

.box-content {
    float: left;
    margin: 0;
    padding: 5px;
    width: 24%;
}

.box-content h5 {
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
    color: #363636;
    font-weight: bold;
    font-size: 11px;
    border-bottom: 1px solid #ddd;
}

.box-content p {
    margin: 0 0 5px 0;
    padding: 0;
}

.button-process {
    background-image: url("../img/button-process.png");
    background-position: left top;
    border: medium none;
    height: 42px;
    margin: 0;
    padding: 0;
    width: 122px;
}